<template>
  <div>
    <el-card class="box-card">
      <el-table :data="tableData" row-key="id" :tree-props="defaultProps">
        <el-table-column prop="order" label="排序" />
        <el-table-column prop="name" label="菜单名" :show-overflow-tooltip="true" />
        <el-table-column width="200" prop="type" label="菜单类型">
          <template slot-scope="scope">
            {{ scope.row.type === 3 ? '目录' : scope.row.type === 6 ? '菜单' : '按钮' }}
          </template>
        </el-table-column>
        <el-table-column label="层级" width="200" prop="level" />
        <el-table-column prop="desc" label="描述" :show-overflow-tooltip="true" />
        <el-table-column prop="url" label="请求路径" :show-overflow-tooltip="true" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/user'
// import { v4 as uuidv4 } from 'uuid'; // 引入uuid库
export default {
  data() {
    return {
      // 渲染数据
      tableData: [{}],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await getUserInfo()
      this.tableData = res.menuTreeVOList.map(menu => ({ ...menu, id: menu.order }))
      console.log(res)
    }
  }
}
</script>

<style lang="scss" scoped>
 .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 90%;
    margin-left: 5%;
  }
</style>
